import React, { Fragment, useEffect, useRef, useState } from "react";
// import { message } from 'tea-component';

// import { Avatar } from "../../../components/avatar/avatar";
// import { getGroupMemberList, getMsgList, markMessageAsRead, getUserInfoList } from "../api";
// import { MessageInput } from "../MessageInput";
// import { MessageView } from "../MessageView";

import "../scss/message-info.scss";
import { useDispatch, useSelector } from "react-redux";
import {
    changeDrawersVisible,
    changeToolsTab,
} from "../../../store/actions/groupDrawer";
import { GroupToolBar } from "./GroupToolBar";
import { ConversationContentHeader } from "./conversationContentHeader";
import { HistoryMessageList } from "./historyList";
import { ConversationMessageInput } from "./conversaionMessageInput";
import { useDialogRef } from "../../../utils/react-use/useDialog";
import { AddFriendDialog } from "../../relationship/friend-list/AddFriendModal";


export const ConversationContent = (props: { currentSelectedConversation}): JSX.Element => {
    const { currentSelectedConversation } = props
    const dispatch = useDispatch();
    const { conv_type,conv_profile} = currentSelectedConversation || {};
    const [height, setHeight] = useState(153);
    const [dragging, setDragging] = useState(false);
    const [initialY, setInitialY] = useState(null);
    const {userId} = useSelector((state: State.RootState) =>{ 
        if(addFriendDialogRef?.current&& state.userInfo.addFriendID?.length>0){
            addFriendDialogRef.current.open();
        }
        return state.userInfo});
    // 设置群信息相关
    const handleClick = (id: string) => dispatch(changeToolsTab(id));
    const handleShow = () => dispatch(changeDrawersVisible(true));
    const handleClose = () => dispatch(changeDrawersVisible(false));
    const addFriendDialogRef = useDialogRef();
    function onMouseDown(e) {
        setDragging(true);
        setInitialY(e.clientY);
    }
    function onMouseUp() {
        setDragging(false);
    }
    function onMouseMove(e) {
        if (dragging) {
            const newHeight = height + (initialY -e.clientY);
            if(newHeight>100&& newHeight<400){
                //console.log(newHeight);
                setHeight(newHeight);
                setInitialY(e.clientY);
            }
        }
    }


    return (
        <Fragment>
            <div className="message-info-view" id="messageInfo" onMouseLeave={onMouseUp} onMouseUp={onMouseUp} onMouseMove={onMouseMove} >
                <ConversationContentHeader currentSelectedConversation={currentSelectedConversation} />
                <section className="message-info-view__content">
                    {/* 历史消息 */}
                    <HistoryMessageList currentSelectedConversation={currentSelectedConversation} />
                    <div style={{width:"100%",height:"5px",cursor:"ns-resize",position:"absolute",bottom:`${height}px`} } draggable={false} onMouseDown={onMouseDown}></div>
                    {/* 输入框 */}
                    <div style={{height: `${height}px`} }>
                    <ConversationMessageInput  currentSelectedConversation={currentSelectedConversation}  />
                    </div>
                </section>
            </div>
            {/* 群组快捷操作面板 */}
            {conv_type === 2 && conv_profile?.group_base_info_self_info?.group_self_info_role!=200 ? (
                <GroupToolBar onActive={handleClick} onShow={handleShow}  onClose={handleClose}/>
            ) : null}
            <AddFriendDialog dialogRef={addFriendDialogRef} />
        </Fragment>
    );
};